<template>
  <div id="shouhuiquan">
    <!--top-header-->
    <top-header></top-header>
    <!--logo and search-->
    <div style="clear: left" class="logoAndSearch">
      <logo-search @on-submit="onSubmit"
                   @on-change="onChange"
                   :propsValue="propsValue">
      </logo-search>
    </div>
    <!--nav-->
    <h-nav :activeIndex="activeIndex"></h-nav>

    <!--container-->

    <!--当搜索关键词没有的时候-->
    <div v-show="!propsValue" class="container maxWidth">
      <div class="top">
        <img v-src="'/static/img/souhuiquan/top.png'" alt="">
      </div>
      <div class="content">
        <img v-src="'/static/img/souhuiquan/container.png'" alt="">
      </div>
    </div>

    <div v-show="!propsValue" class="searchBox">
      <logo-search class="bottomSearch" :showhotKeyWord="showhotKeyWord"
                   :showLogo="showLogo"
                   :showErweima="showErweima"
                   @on-submit="onSubmit"
                   @on-change="onChange"
                   :propsValue="propsValue"
      ></logo-search>
    </div>

    <!--有搜索关键词-->
    <div v-show="propsValue" class="container maxWidth">
      <p class="search_result">为您找到 <span class="search_info">" {{propsValue}} "</span> 的优惠券</p>
      <div v-show="false" class="selector_box flex-row">
        <div class=" flex-grow-1 selector_fixed " ref="selectors" :class="{'isfixed':isFixed}">
          <ul class="goods_selector clearfix">
            <li @click="goodsSelectorClick(index)" :class="{'active':currentIndex==index}"
                v-for="(item,index) in goodsSelector"><span>{{item}}</span></li>
          </ul>
          <div class="slider" :style="{'transform':'translate3d('+currentIndex*100+'px,0,0)'}"></div>
        </div>
        <div class=" flex-grow-0 souquan_number">
          <span class="souquan_circle"></span>共300万张天猫优惠券，已帮喵友找到 106360 张券
        </div>
      </div>

      <div class="goods_list flex-list">
        <search-list :key="index" :item="item" v-for="(item,index) in couponListData"></search-list>
      </div>
      <p class="no_list" v-show="noList">没找到与 "<span class="color_red">{{propsValue}}</span>" 相关的商品哦，要不您换个关键词我帮您再找找看</p>
    </div>

    <no-more :noMore="noMore"></no-more>
    <!--footer-->
    <v-footer></v-footer>

    <!--回到顶部-->
    <go-top :isShowGoTop="isShowGoTop"></go-top>
  </div>
</template>
<script>
  import TopHeader from 'src/components/common/topHeader.vue'
  import HNav from 'src/components/common/nav.vue'
  import LogoSearch from 'src/components/common/logoSearch.vue'
  import VFooter from 'src/components/common/footer.vue'
  import SearchList from 'src/components/common/searchList.vue'
  import goTop from 'src/components/common/goTop'
  import NoMore from 'src/components/common/noMore'
  import MDUtils from 'src/assets/js/md-utils'
  import {URI_GETSEARCHRESULT} from 'src/const/uri'

  export default {
    components: {HNav, TopHeader, LogoSearch, VFooter, SearchList, goTop, NoMore},
    data() {
      return {
        activeIndex: 2,
        propsValue: '',
        goodsSelector: ['销量', '折扣', '价格', '券面额'],
        currentIndex: 0,
        isFixed: false,
        isShowGoTop: false,
        key: MDUtils.getQueryParam('key'),
        reqPage: 1,
        reqPageSize: 40,
        couponListData: [],
        sw: true,
        showLogo: false,
        showErweima: false,
        showhotKeyWord: false,
        noList: false,
        noMore: false,
      }
    },
    watch: {
      couponListData(val) {
        if (val == '') {
          this.noList = true
        } else {
          this.noList = false
        }
      }
    },
    created() {
      this.initSearchData();
    },
    mounted() {

      //get urL 参数
      this.propsValue = MDUtils.getQueryParam('key');
      //console.log(this.propsValue);
      let selectorOffesetTop = this.$refs.selectors.offsetTop;
      let shouhuiquan = document.getElementById('shouhuiquan')
      window.addEventListener('scroll', () => {

        if (document.documentElement.scrollTop + document.documentElement.clientHeight >= shouhuiquan.offsetHeight - 400) {
          if (this.sw == true) {
            this.reqPage += 1;
            this.sw = false;
            this.initSearchData();
          }
        }

        if (document.documentElement.scrollTop >= selectorOffesetTop) {
          this.isFixed = true;
        } else {
          this.isFixed = false;
        }
        if (document.documentElement.scrollTop > 400) {
          this.isShowGoTop = true;
        } else {
          this.isShowGoTop = false;
        }
      })
    },
    methods: {
      initSearchData() {
        this.$ajax.get(URI_GETSEARCHRESULT, {
          key: this.key,
          reqPage: this.reqPage,
          reqPageSize: this.reqPageSize,
          promotionTypeId: 1,
          goodCatId: 0
        }, (res) => {
          this.couponListData = this.couponListData.concat(res.data.data);
          this.sw = true;
          if (res.data.data.length < 40) {
            //说明没数据了
            console.log('没数据了');
            this.sw = false;
            this.noMore = true;
          }
          ;
          console.log(this.couponListData);
        });
      },
      goodsSelectorClick(index) {
        this.currentIndex = index;
      },
      onSubmit(val) {
        // console.log(val);
        //  this.propsValue=val;
        //  this.key=val;
        //  document.documentElement.scrollTop=0;
        //  this.couponListData=[];
        //  this.reqPage=1;
        //  this.reqPageSize=40;
        //  this.initSearchData();
        window.location.href = `${cdnBase}/html/souhuiquan.html?key=${val}`
      },
      onChange(val) {
        console.log('onChange' + val);
      }
    }

  }
</script>
<style lang="less" scoped>
  @import "souhuiquan";

  .bottomSearch {
    padding-left: 360px;
  }
</style>
